<#include "../head.html">
<meta charset="utf-8">
<link rel="stylesheet" href="${request.contextPath}/static/js/zTree_v3/css/metroStyle/metroStyle.css" type="text/css">
<style type="text/css">
div#rMenu {
	position: absolute;
	visibility: hidden;
	top: 0;
	background-color: #555;
	text-align: left;
	
}

div#rMenu ul li {
	margin: 1px 0;
    padding: 5px 15px;
    cursor: pointer;
    list-style: none outside none;
    background-color: #DFDFDF;
}
ol, ul {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 1px;
}
</style>

<div class="col-sm-12 animated slideInRight">
    <div class="ibox float-e-margins">
        <div id="ztree-content" class="ibox-content">
                <div class="col-sm-2">
                    <ul id="treeDiv" class="ztree"></ul>
                </div>
                <div class="col-sm-10">
                    <table id="dataTable"></table>
                </div>
                <div class="clearfix"></div>
        </div>
    </div>
	<div id="rMenu">
		<ul>
			<@permis url="manger/dic/edit">
			<li id="m_add" onclick="addDic();">增加字典</li>
			</@permis>
			<@permis url="manger/dic/edit">
			<li id="m_update" onclick="updateDic();">修改字典</li>
			</@permis>
			<@permis url="manger/dic/batchDel">
			<li id="m_del" onclick="delDic();">删除字典</li>
			</@permis>
			
		</ul>
	</div>
</div>
<#include "../foot.html">
<script src="${request.contextPath}/static/js/zTree_v3/js/jquery.ztree.core.js"></script>
<script src="${request.contextPath}/static/js/zTree_v3/js/jquery.ztree.excheck.js"></script>
<script src="${request.contextPath}/static/js/zTree_v3/js/jquery.ztree.exedit.js"></script>
<script src="${request.contextPath}/static/js/base_list.js"></script>
<script src="${request.contextPath}/static/js/common.js"></script>
<script type="text/javascript">

    var dataUrl = "${request.contextPath}/manger/dic/getTableData";
    var setting = {
    		edit: {
				enable: true,
				showRemoveBtn: false,
				showRenameBtn: false
			},
    		view: {
    	        showLine : true,                  //是否显示节点间的连线  
    	        checkable : false
    		},
    		data: {
    			simpleData: {
    				enable: true,			//数据是否采用简单 Array 格式，默认false
    				idKey: "id",
    				pIdKey: "pid",
    				rootPId: -1
    			}
    		},
    		async: {
    			enable: true,
    			url: "${request.contextPath}/manger/dic/getData",
    			autoParam: ["id"]
    		},
    		callback: {
    			onClick: onClick,
    			onRightClick: onRightClick,
    			beforeDrag: beforeDrag,
				beforeDrop: beforeDrop
    		}
        };
    
    function beforeDrag(treeId, treeNodes) {
		for (var i=0,l=treeNodes.length; i<l; i++) {
			if (treeNodes[i].drag === false) {
				return false;
			}
		}
		return true;
	}
	function beforeDrop(treeId, treeNodes, targetNode, moveType) {
		
		if(targetNode ? targetNode.drop !== false : true) {
			layer.confirm('确定执行该操作吗？', {
	            btn: ['确定', '取消'] //按钮
	        }, function() {
	        	dragSynch(treeNodes[0], targetNode);
	        });
		} 
		return false;
	}
	
	function dragSynch(treeNode, targetNode) {
		var url = "${request.contextPath}/manger/dic/updateRelation";
		$.ajax({
            type: "POST",
            url: url,
            data: "nodeId=" + treeNode.id + "&targetId=" + targetNode.id,
            datatype: "text",
            success: function (data) {
            	var d = JSON.parse(data);
                if(d.success && d.data){
                	refreshDrag(treeNode, targetNode);
                }
                layer.closeAll();
                
            }
        });
	}
	
	function refreshDrag(treeNode, targetNode) {
		if(treeNode.getParentNode() == targetNode.getParentNode()) {
			zTree.reAsyncChildNodes(treeNode.getParentNode(), "refresh");
			$('#dataTable').bootstrapTable('refresh',{url:dataUrl});
		} else {
		    zTree.reAsyncChildNodes(targetNode, "refresh");
            zTree.reAsyncChildNodes(treeNode.getParentNode(), "refresh");
            $('#dataTable').bootstrapTable('refresh',{url:dataUrl});
		}
	}
	

        function onClick(event, treeId, treeNode) {
    		$('#dataTable').bootstrapTable('refresh', {
    			url : dataUrl+"?pid=" + treeNode.id
    		});
        };
        
        function onRightClick(event, treeId, treeNode) {
        	var url = dataUrl+"?pid=" + treeNode.id ;
        	console.log(url);
        	if(dataUrl != url) {
        	    onClick(event, treeId, treeNode);
            }
			if (treeNode && treeNode.id == 0) {
				zTree.selectNode(treeNode);
				showRMenu("root", event.clientX, event.clientY);
			} else if (treeNode && !treeNode.noR) {
				zTree.selectNode(treeNode);
				showRMenu("node", event.clientX, event.clientY);
			}
		}

		function showRMenu(type, x, y) {
			$("#rMenu ul").show();
			if (type=="root") {
				$("#m_add").show();
				$("#m_update").hide();
				$("#m_del").hide();
			} else {
				$("#m_add").show();
				$("#m_update").show();
				$("#m_del").show();
			}
			rMenu.css({"top":y+"px", "left":x+"px", "visibility":"visible"});
			$("body").bind("mousedown", onBodyMouseDown);
		}
		function hideRMenu() {
			if (rMenu) rMenu.css({"visibility": "hidden"});
			$("body").unbind("mousedown", onBodyMouseDown);
		}
		function onBodyMouseDown(event){
			if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
				rMenu.css({"visibility" : "hidden"});
			}
		}
        
        var zTree, rMenu;
        $(function() { 
        	$.fn.zTree.init($("#treeDiv"), setting);
			zTree = $.fn.zTree.getZTreeObj("treeDiv");
			//开启拖拽功能
			zTree.setting.edit.drag.isCopy = true;
			zTree.setting.edit.drag.isMove = true;
			zTree.setting.edit.drag.prev = true;
			zTree.setting.edit.drag.inner = true;
			zTree.setting.edit.drag.next = true;
			rMenu = $("#rMenu");
			
		});
        
      
    var dataColumns = [{
        field: 'id',
        title: '序号'
    }, {
        field: 'name',
        title: '字典名'
    }, {
        field: 'description',
        title: '字典描述'
    }, {
        field: 'code',
        title: '字典编码'
    }, {
        field: 'sort',
        title: '排序序号'
    }, {
        title: '操作',
        formatter: function (value, row, index) {
            var id = row.id,
            	btn = "";
            <@permis url="manger/dic/edit"> 
            	btn='<a class="btn btn-xs btn-warning" onclick="updateDic(' + "'" + id + "',1" + ')"><i class="fa fa-pencil"></i>编辑</a> '
		    </@permis> 
		    <@permis url="manger/dic/batchDel">
		    	  +	'<a class="btn btn-xs btn-danger" onclick="delDic(' + "'" + id + "',1" + ')"><i class="fa fa-remove"></i>删除</a>'
		    </@permis>  
            return btn;
        }
    }
    ];
    function dataQueryParams(params) {
        return {
            _size: params.limit,  //页面大小
            _index: params.offset, //页码
        };
    }
       
    function addDic() {
    	var title = "新增字典";
    	var nodes = zTree.getSelectedNodes();
    	var url;
    	if(nodes.length == 0) {
    		alert('请选择一个节点');
    		return
    	}
    	else {
    		url = "${request.contextPath}/manger/dic/edit?state=1&id=" + nodes[0].id;
    	}
    	openWin(title, url);
    }
    
    function updateDic(id,state) {
    	var title = "编辑字典";
    	var nodes = zTree.getSelectedNodes();
    	if(id > 0 || state==1) {//state==1 表格点击
    		url = "${request.contextPath}/manger/dic/edit?state=2&id=" + id;
    	} else if(nodes.length == 0 || nodes[0].id == 0) {
    		alert('请选择一个节点');
    	} else {
    		url = "${request.contextPath}/manger/dic/edit?state=2&id=" + nodes[0].id;
    	}
    	openWin(title, url);
    }
    
    function delDic(id,state) {
    	var nodes = zTree.getSelectedNodes();
    	var url;
    	if(id > 0 || state==1) {//state==1 表格点击
    		url = "${request.contextPath}/manger/dic/batchDel?ids=" + id;
    	} else if(nodes.length == 0 || nodes[0].id == 0) {
    		alert('请选择一个节点');
    	} else {
    		url = "${request.contextPath}/manger/dic/batchDel?ids=" + nodes[0].id;
    	}
        //询问框
        layer.confirm('确定删除吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
            $.ajax({
                type: "POST",
                url: url,
                datatype: "text",
                success: function (data) {
    	        	var bool=stateUtil(data);
	        			pid=(nodes.length!=0?nodes[0].id:-1);
    	        	if(bool){
                    	if(id > 0) {
                            refreshTable(pid);  
                            zTree.reAsyncChildNodes(nodes[0], "refresh");
                    	} else {
                            refreshTable(pid);
                    		refreshParent();
                    	}
    	        	}
                }
            });
        }, function () {
            return;
        });
    }
    
function openWin(title, url) {
	layer.open({
        type: 2,
        title: title,
        shadeClose: true,
        shade: 0.8,
        area: ['600px', '530px'],
        fix: false,
        maxmin: true,
        content: url
    });
}

function refreshTree() {
	rMenu.css({"visibility":"hidden"});
	var nodes = zTree.getSelectedNodes();
	if (nodes.length>0) {
		nodes[0].isParent = "true";
		zTree.updateNode(nodes[0]);
	    zTree.reAsyncChildNodes(nodes[0], "refresh");
	}
}

function refreshParent() {
	rMenu.css({"visibility":"hidden"});
	var nodes = zTree.getSelectedNodes();
	if (nodes.length>0) {
	    zTree.reAsyncChildNodes(nodes[0].getParentNode(), "refresh");
	}
}

function refreshNode() {
	rMenu.css({"visibility":"hidden"});
	var nodes = zTree.getSelectedNodes();
	if (nodes.length>0) {
	    zTree.reAsyncChildNodes(nodes[0], "refresh");
	}
}


function refreshTable(pid) {
	rMenu.css({"visibility":"hidden"});
	pid=(pid!=null?pid:-1);
	$('#dataTable').bootstrapTable('refresh',{url:dataUrl+"?pid="+pid});
}


</script>
